﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户列表</title>
		<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css"/>
        <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css"/>
        <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="js/jquery.json.min.js"></script>
        <script type="text/javascript">
			var gridsize = 10;
			var gridpage = 1;
			var selectid;
			var selectindex;
			var editindex = null;
			var departlist = [];
			var sexlist;
			var levellist = [];
			var rolelist = [];
			var statlist = [];
			var valid = false;
			var gridtoolbar = [{
				text:'添加',
				iconCls:'icon-add',
				handler: newgrid
			},'-',{
				text:'删除',
				iconCls:'icon-remove',
				handler: deletegrid
			},'-',{
				text:'修改信息',
				iconCls:'icon-edit',
				handler: editgrid
			},'-',{
				text:'保存修改',
				iconCls:'icon-save',
				handler: endedit
			},'-',{
				text:'修改密码',
				iconCls:'icon-save',
				handler: changepsw 
			}];
			$.extend($.fn.validatebox.defaults.rules, {
				exist: {
					validator: function(value, param){
						var url = param[0];
						var para = param[1];
						var map = {};
						var result
						map[para] = value
						$.ajax({
							type: "POST",
							async: false,
							url: url,
							data: map,
							dataType: 'json',
							success: function(data){
								result = !(data.exist);
							}
						})
						valid = result;
						return result;
					},
					message: '用户名已存在'
				}
			});
        	$(function(){
        		$.ajax({
					type: "POST",
					async: false,
					url: 'meta!getCates.do',
					data: {cateNames: $.toJSON(['性别', '状态'])},
					dataType: 'json',
					success: function(data){
						sexlist = data.性别;
						statlist = data.状态;
						initSexOption(sexlist);
					}
				});
        		$('#usergrid').datagrid({
        			singleSelect:true,
        			url:'user!getAll.do',
        			queryParams: {
        				page: gridpage,
        				size: gridsize
        			},
        			fit: true,
        			border: false,
        			rownumbers: true,
        			pagination: true,
    				columns: [[
							{field:'name',title:'用户姓名',width:150,align:'center'},
							{field:'sex',title:'性别',width:150,align:'center',formatter:formatesex,
								editor: {
									type: 'combobox',
									options: {
										valueField: 'value',
										textField: 'key',
										data: sexlist
									}
								}
							},
							{field:'depart',title:'用户单位',width:150,align:'center',
								editor: {
									type: 'combobox',
									options: {
										valueField: 'value',
										textField: 'key',
										data: departlist
									}
								}
							},
							{field:'level',title:'用户类别',width:150,align:'center',
								editor: {
									type: 'combobox',
									options: {
										valueField: 'value',
										textField: 'text',
										data: levellist
									}
								}
							},
							{field:'role',title:'用户角色',width:150,align:'center',
								editor: {
									type: 'combobox',
									options: {
										valueField: 'value',
										textField: 'text',
										data: rolelist
									}
								}
							},
							{field:'stat',title:'用户状态',width:150,align:'center',formatter:formatestat,
								editor: {
									type: 'combobox',
									options: {
										valueField: 'value',
										textField: 'key',
										data: statlist
									}
								}
							}
						]],
        			toolbar: gridtoolbar,
    				onSelect: function(index, data){
    					if(editindex)
    						endedit();
    					selectindex = index;
    				},
    				onDblClickRow: editgrid,
    				onAfterEdit: afteredit
        		});
        		$('#dialog').dialog({
					width: 300, 
					height: 360,
					closed: true
				});
        		$('#pswdg').dialog({
					width: 300, 
					height: 180,
					closed: true,
					title: "修改密码"
				});
        		$('#savebtn').linkbutton({
        			iconCls: "icon-save",
        			width: 60
        		});
        		$('#closebtn').linkbutton({
        			iconCls: "icon-cancel"
        		})
        		$('#pswsave').linkbutton({
        			iconCls: "icon-save",
        			width: 60
        		});
        		$('#pswclose').linkbutton({
        			iconCls: "icon-cancel"
        		});
        		$('#account').bind('onChange',accountExist);
        	});
        	
        	function initGridPage(){
        		$('#usergrid').datagrid("getPager").pagination("select", gridpage);
        	}
        	
        	function initSexOption(sexlist){
        		var node = $('#sex');
				node.empty();
				var size = sexlist.length;
				for(var i=0; i<size; i++){
					node.append('<option value='+sexlist[i].value+'>'+sexlist[i].key+'</option>');
				}
        	}
        	
        	function accountExist(){
        		var account = $('#account').val;
        		if(account != null){
        			$.ajax({
			             type: "POST",
			             url: "account!isExist.do",
			             data: {
			            	 account: account
			             },
			             dataType: "json",
			             success: function(data){
			            	 if(data.exist){
			            		 $('#usergrid').datagrid("loadData", data.data);
			            		 $.messager.alert('删除成功', '用户删除成功', 'info');
			            	 }else{
			            		 $.messager.alert("删除失败", "用户删除失败", 'error');
			            	 }
			             }
		        	});
        		}
        	}
        	
        	function changepsw(){
        		var select = $('#usergrid').datagrid("getSelected");
        		var username;
        		if(select == null){
        			$.messager.alert("修改失败","请选择一个用户","error");
        		}else{
        			selectid = select.userid;
        			username = select.account;
        			$('#username')[0].innerHTML = username;
        			$('#psw').val(null);
        			$("#pswdg").dialog("open");
        		}
        	}
        	function closepswdg(){
        		$('#pswdg').dialog("close");
        	}
        	function submitpswdg(){
        		var psw = $('#psw').val();
        		$.ajax({
		             type: "POST",
			             url: "account!changepsw.do",
			             data: {
		        			 userid: selectid,
		        			 password: psw	
			             },
			             dataType: "json",
			             success: function(data){
			            	 if(data.success){
			            		 $.messager.alert("修改成功", "用户密码修改成功", 'ok');
			            	 }else{
			            		 $.messager.alert("修改失败", "用户密码修改失败", 'error');
			            	 }
			            	 $('#pswdg').dialog("close");
			             }
				});
        	}

        	function formatestat(val, row){
        		var length = statlist.length;
        		var key;
        		for(var i = 0; i < length; i++){
        			if(statlist[i].value == val){
        				key = statlist[i].key;
        				break;
        			}
        		}
        		return key;
        	}
        	function formatesex(val, row){
        		var length = sexlist.length;
        		var key;
        		for(var i = 0; i < length; i++){
        			if(sexlist[i].value == val){
        				key = sexlist[i].key;
        				break;
        			}
        		}
        		return key;
        	}
        	function afteredit(index, data, changes) {
        		$.ajax({
		             type: "POST",
			             url: "user!edit.do",
			             data: {
		        			 name: data.name,
		        			 sex: data.sex,
		        			 depart: data.depart,
		        			 level: data.level,
		        			 userid: data.userid,
		        			 role: data.role,
		        			 stat: data.stat,
							 page: gridpage,
		        			 size: gridsize
			             },
			             dataType: "json",
			             success: function(data){
			            	 if(data.success){
			            		 $('#usergrid').datagrid("loadData", data.data);
			            	 }else{
			            		 $.messager.alert("修改失败", "用户修改失败", 'error');
			            	 }
			             }
				});
        	}
        	function endedit(){
				$('#usergrid').datagrid('endEdit', editindex);
				editindex = null;
        	}
			function editgrid(){
				if(editindex)
					endedit();
				var select = $('#usergrid').datagrid("getSelected");
				if(select == null){
            		 $.messager.alert("修改失败", "请选择一个用户", 'error');
				}
				else{
					editindex = selectindex;
					$('#usergrid').datagrid('beginEdit', editindex);					
				}

			}
			function newgrid(){
				$('#account').val(null);
				$('#password').val(null);
				$('#name').val(null);
				$('#sex').val(1);
				$('#depart').val(0);
				$('#level').val(0);
				$('#role').val(0);
				$('#dialog' ).dialog("open").dialog("setTitle", "新增用户");
			}
			function savenew(){
				var account = $('#account').val();
				var password = $('#password').val();
				var name = $('#name').val();
				var sex = $('#sex').val();
				var depart = 0;
				var level = 0;
				var role = 0;
				if(valid){
					$.ajax({
			             type: "POST",
			             url: "user!add.do",
			             data: {
			            	 account: account,
			            	 password: password,
		        			 name: name,
		        			 sex: sex,
		        			 depart: depart,
		        			 level: level,
		        			 role: role,
							 page: gridpage,
		        			 size: gridsize
			             },
			             dataType: "json",
			             success: function(data){
			            	 closedg();
			            	 if(data.success){
			            		 $('#usergrid').datagrid("loadData", data.data);
			            		 gridpage = data.data.page;
			            		 gridsize = data.data.size;
			            		 initGridPage();
			            		 $.messager.alert('添加成功', '用户添加成功', 'info');
			            	 }else{
			            		 $.messager.alert("添加失败", "用户添加失败", 'error');
			            	 }
			             }
					});
				}
				else{
           			$.messager.alert("添加失败", "用户名已存在", 'error');
				}
			}
			function saveedit(){
				var account = $('#account').val();
				var password = $('#password').val();
				var name = $('#name').val();
				var sex = $('#sex').val();
				var depart = 0;
				var level = 0;
				var role = 0;
				$.ajax({
		             type: "POST",
			             url: "user!edit.do",
			             data: {
		        			 depart: depart,
		        			 level: level,
		        			 role: role,
							 page: gridpage,
		        			 size: gridsize,
		        			 userid: selectid
			             },
			             dataType: "json",
			             success: function(data){
			            	 closedg();
			            	 if(data.success){
			            		 $('#usergrid').datagrid("loadData", data.data);
			            		 $.messager.alert('修改成功', '用户修改成功', 'info');
			            	 }else{
			            		 $.messager.alert("添加失败", "用户修改失败", 'error');
			            	 }
			             }
				});
			}
			function closedg(){
				$('#dialog').dialog("close");
			}
			function deletegrid(){
				var select = $('#usergrid').datagrid("getSelected");
				if(select == null){
            		 $.messager.alert("删除失败", "请选择一个用户", 'error');
				}
				else{
					selectid = select.userid;
					gridpage = $('#usergrid').datagrid('options').pageNumber;
					gridsize = $('#usergrid').datagrid('options').pageSize;
					$.ajax({
				             type: "POST",
				             url: "user!delete.do",
				             data: {
				            	 userid: selectid,
				            	 page: gridpage,
			        			 size: gridsize	 
				             },
				             dataType: "json",
				             success: function(data){
				            	 if(data.success){
				            		 $('#usergrid').datagrid("loadData", data.data);
				            		 $.messager.alert('删除成功', '用户删除成功', 'info');
				            	 }else{
				            		 $.messager.alert("删除失败", "用户删除失败", 'error');
				            	 }
				             }
			        	});
				}
			}
        </script>
        <style type="text/css">
        	.dialogtb{
        		margin: 0 0 0 20px ;
        	}
        	.dialogtb td{
        		height: 35px;
        		text-align: 'center';
        	}
        	.tdtitle{
        		width: 60px;
        	}
        	.tdvalue{
        		width: 150px;
        	}
        	.tdbutton{
        		float: left;
        		width: 80px;
        		margin: 10px -40px 0 55px;
        	}
        	.none{
        		display: none;
        	}
        </style>
    </head>
	<body>
		<table id="usergrid"></table>
		<div id="dialog">
			<table class="dialogtb">
				<tr>
					<td class="tdtitle">用 户 名：</td>
					<td class="tdvalue">
						<input id="account" class="easyui-validatebox" validtype="exist['account!isExist.do','account']"/>
					</td>
				</tr>
				<tr>
					<td>密&nbsp;&nbsp;码：</td>
					<td><input type="password" id="password" /></td>
				</tr>
				<tr>
					<td>姓&nbsp;&nbsp;名：</td>
					<td><input type="text" id="name" /></td>
				</tr>
				<tr>
					<td>性&nbsp;&nbsp;别：</td>
					<td>
						<select id="sex">
							<option value="1" selected="selected">男</option>
							<option value="0">女</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>工作单位：</td>
					<td>
						<select id="depart">
						</select> 
					</td>
				</tr>
				<tr>
					<td>用户类别：</td>
					<td>
						<select id="level">
						</select> 
					</td>
				</tr>
				<tr>
					<td>用户角色：</td>
					<td>
						<select id="role">
						</select> 
					</td>
				</tr>
			</table>
			<div>
				<div class="tdbutton"><a id="savebtn" onclick="savenew()">保存</a></div>
				<div class="tdbutton"><a id="closebtn" onclick="closedg()">关闭</a></div>
			</div>
		</div>
		<div id="pswdg">
			<table class="dialogtb">
				<tr>
					<td class="tdtitle">用 户 名：</td>
					<td class="tdvalue" id="username"></td>
				</tr>
				<tr>
					<td>新 密 码：</td>
					<td><input type="password" id="psw" /></td>
				</tr>				
			</table>
			<div>
				<div class="tdbutton"><a id="pswsave" onClick="submitpswdg()">保存</a></div>
				<div class="tdbutton"><a id="pswclose" onClick="closepswdg()">关闭</a></div>
			</div>
		</div>
	</body>
</html>